<template>
  <div class="mod-config">
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-table
            :data="dataList1"
            border
            v-loading="dataListLoading"
            style="width: 321px;"
            size="mini"
            :row-class-name="tableRowClassName"
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '2px' }"
          >
            <el-table-column
              prop="switchId"
              header-align="center"
              align="center"
              label="光开关"
              width="57"
            >
            </el-table-column>
            <el-table-column
              prop="measurePoint"
              header-align="center"
              align="center"
              label="测点"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="fbgNum"
              header-align="center"
              align="center"
              label="FBG"
              width="47"
            >
            </el-table-column>
            <el-table-column
              prop="partId"
              header-align="center"
              align="center"
              label="段ID"
              width="46"
            >
            </el-table-column>
            <el-table-column
              prop="face"
              header-align="center"
              align="center"
              label="方向"
              width="49"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.face == 0 ? "正面" : "反面" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              width="52"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="addOrUpdateHandle(scope.row.id)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-table
            :data="dataList2"
            border
            v-loading="dataListLoading"
            style="width: 321px;"
            size="mini"
            :row-class-name="tableRowClassName"
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '2px' }"
          >
            <el-table-column
              prop="switchId"
              header-align="center"
              align="center"
              label="光开关"
              width="57"
            >
            </el-table-column>
            <el-table-column
              prop="measurePoint"
              header-align="center"
              align="center"
              label="测点"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="fbgNum"
              header-align="center"
              align="center"
              label="FBG"
              width="47"
            >
            </el-table-column>
            <el-table-column
              prop="partId"
              header-align="center"
              align="center"
              label="段ID"
              width="46"
            >
            </el-table-column>
            <el-table-column
              prop="face"
              header-align="center"
              align="center"
              label="方向"
              width="49"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.face == 0 ? "正面" : "反面" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              width="52"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="addOrUpdateHandle(scope.row.id)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-table
            :data="dataList3"
            border
            v-loading="dataListLoading"
            style="width: 321px;"
            size="mini"
            :row-class-name="tableRowClassName"
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '2px' }"
          >
            <el-table-column
              prop="switchId"
              header-align="center"
              align="center"
              label="光开关"
              width="57"
            >
            </el-table-column>
            <el-table-column
              prop="measurePoint"
              header-align="center"
              align="center"
              label="测点"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="fbgNum"
              header-align="center"
              align="center"
              label="FBG"
              width="47"
            >
            </el-table-column>
            <el-table-column
              prop="partId"
              header-align="center"
              align="center"
              label="段ID"
              width="46"
            >
            </el-table-column>
            <el-table-column
              prop="face"
              header-align="center"
              align="center"
              label="方向"
              width="49"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.face == 0 ? "正面" : "反面" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              width="52"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="addOrUpdateHandle(scope.row.id)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-table
            :data="dataList4"
            border
            v-loading="dataListLoading"
            style="width: 321px;"
            size="mini"
            :row-class-name="tableRowClassName"
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '2px' }"
          >
            <el-table-column
              prop="switchId"
              header-align="center"
              align="center"
              label="光开关"
              width="57"
            >
            </el-table-column>
            <el-table-column
              prop="measurePoint"
              header-align="center"
              align="center"
              label="测点"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="fbgNum"
              header-align="center"
              align="center"
              label="FBG"
              width="47"
            >
            </el-table-column>
            <el-table-column
              prop="partId"
              header-align="center"
              align="center"
              label="段ID"
              width="46"
            >
            </el-table-column>
            <el-table-column
              prop="face"
              header-align="center"
              align="center"
              label="方向"
              width="49"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.face == 0 ? "正面" : "反面" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              width="52"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="addOrUpdateHandle(scope.row.id)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div></el-col
      >
    </el-row>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./switchtofbgconfig-add-or-update";
export default {
  data() {
    return {
      dataList1: [],
      dataList2: [],
      dataList3: [],
      dataList4: [],
      pageSize: 16,
      dataListLoading: false,
      addOrUpdateVisible: false
    };
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList();
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.fbgNum === 0) {
        return "warning-row";
      } else if (row.fbgNum === 20) {
        return "jizhun-row";
      } else {
        return "success-row";
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/generator/switchtofbgconfig/list"),
        method: "get",
        params: this.$http.adornParams({
          limit: this.pageSize
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList1 = data.page[0].list;
          this.dataList2 = data.page[1].list;
          this.dataList3 = data.page[2].list;
          this.dataList4 = data.page[3].list;
        } else {
          this.dataList1 = [];
          this.dataList2 = [];
          this.dataList3 = [];
          this.dataList4 = [];
        }
        this.dataListLoading = false;
      });
    },

    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    sdsad(scope) {
      console.log(scope);
    }
  }
};
</script>
<style>
.el-table .warning-row {
  background: rgb(253, 230, 230);
}

.el-table .success-row {
  background: #ebf9ee;
}

.el-table .jizhun-row {
  background: #f0f062;
}
</style>
